<template>
  <div>
    <BorderTitle>推荐歌单</BorderTitle>
    <ul class="songlist" v-if="songList.length>0">
      <ListItem v-for="sl in songList" :key="sl.id" :item="sl"></ListItem>
    </ul>
    <Loading v-if="songList.length==0"></Loading>
    <BorderTitle>推荐音乐</BorderTitle>
    <ul class="newsong" v-if="songList.length>0">
      <li v-for="s in newSong" :key="s.id">
        <SongItem :item="s" @add-list="addMusicList(newSong)"></SongItem>
      </li>
    </ul>
    <Loading v-if="newSong.length==0"></Loading>
  </div>
</template>
<script>
  import BorderTitle from '@/components/BorderTitle'
  import ListItem from '@/components/ListItem'
  import SongItem from '@/components/SongItem'
  import Loading from '@/components/Loading'

  export default{
    name:"Recommend",
    components:{
      BorderTitle,
      ListItem,
      SongItem,
      Loading
    },
    data(){
      return {
        songList:[],
        newSong:[]
      }
    },
    methods:{
      // play(musicID){
      //   this.$emit('play',$musicID)
      // }
      // 把最新歌曲列表全部加入播放清单
      addMusicList(newSong){
        let newArr=this.$root.musicStore.musicList;
        newSong.map(d=>{
          let find = false;
          for(let n of newArr){
            // 当前音乐在歌单存在
            if(n.id==d.id){
              find = true;
              break;
            }
          }
          if(!find) newArr.push(d);
        })
        this.$root.musicStore.musicList = newArr;
        // console.log(this.$root.musicStore.musicList)
      },
      
    },
    created(){
      this.$http.get("/personalized?limit=9").then(data=>{
        this.songList = data.data.result;
      }).catch(err=>{
        console.log(err)
      });
      this.$http.get("/personalized/newsong?limit=10").then(data=>{
        this.newSong=data.data.result;
        // console.log(this.newSong)
      }).catch(err=>{
        console.log(err)
      });
      
      }
  }
</script>

<style lang="less" scoped>
.songlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0px 5px;
  padding: 0px;
  li {
    width: 32.5%;
  }
}
.newsong{
  list-style: none;
  padding: 0px;

}
</style>
